<template>
  <view class="comment u-border-bottom" @click.stop="handleCommentClick(item)">
    <view class="comment-left">
      <image class="avatar" :src="item._person_detail.person_pic"></image>
    </view>
    <view class="comment-right">
      <view class="comment-top">
        <view class="user u-line-1">
          <view class="user-name u-line-1">{{ item._person_detail.person_iname }}</view>
          <view class="good_at">{{item._person_detail.good_at}}</view>
        </view>
        <view class="like" :class="{'on': item.is_praise == 1}" @click.stop="handleLike">
          <text v-if="item.is_praise == 1" class="icon icon-like-on"></text>
          <text v-else class="icon icon-like"></text>
          {{ item.agree || 0 }}
        </view>
      </view>
      <view class="comment-content-reply" v-if="item._parent_person_detail" v-html="item._parent_comment.content"></view>
      <view class="comment-content" v-html="item.content"> </view>
      <view class="comment-bottom">
        <view class="time-wrap">
          <view class="time">{{ item.ctime }}</view> 
        </view>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  props: {
    item: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      personId: uni.getStorageSync("person-id").slice(2) || "",
    }
  },
  methods: {
    handleLike(reply, replyIndex) {
      this.$emit('like', {
        reply,
        replyIndex,
      });
    },
    handleCommentClick(reply, replyIndex) {
      this.$emit('comment', {
        reply,
        replyIndex,
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.comment {
  display: flex;
  margin-top: 32rpx;
  padding-bottom: 32rpx;
  &-left {
    flex-shrink: 0;
  }

  &-right {
    flex: 1;
    .comment-top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;
      color: #888888;
      font-size: $uni-font-size-base;
    }
    .user {
      max-width: 440rpx;
      &-name {
        font-weight: bold;
        color: #222222;
        max-width: 210rpx;
      }
      .good_at {
        margin-top: 8rpx;
        color: #888888;
        font-size: 24rpx;
      }
      
      .author {
        margin-left: 6rpx;
        padding: 0 12rpx;
        height: 36rpx;
        line-height: 36rpx;
        font-size: $uni-font-size-sm;
        background: #F04646;
        border-radius: 4rpx;
        color: #FFF;
      }
      .self {
        font-size: 20rpx;
        padding: 4rpx 8rpx;
        background-color: #F4F4F4;
        color: #666666;
        margin-left: 6rpx;
      }

      .icon-play-right {
        width: 14rpx;
        height: 16rpx;
        margin: 0 10rpx;
        background-image: url($img-base + 'career/play-right.png');
      }
    }
    .like {
        display: inline-flex;
        align-items: center;
        &.on {
          color: #F04646;
        }

        .icon {
          margin-right: 6rpx;
        }
      }
    .comment-content {
      margin-bottom: 20rpx;
      font-size: 28rpx;
      color: #222222;
    }
    .comment-content-reply {
      color: #888888;
    }
    .comment-bottom {
      .btn-all {
        display: inline-block;
        height: 48rpx;
        margin-top: $uni-spacing-col-lg;
        margin-right: 16rpx;
        padding: 0 19rpx;
        line-height: 48rpx;
        font-size: $uni-font-size-sm;
        color: #555555;
        text-align: center;
        background: #f8f8f8;
        border-radius: 12px;
        u-icon {
          margin-left: 6rpx;
        }
      }
      .time-wrap {
        font-size: $uni-font-size-sm;
      }
      .time {
        display: inline-block;
        color: #BFBFBF;
        margin-right: 24rpx;
      }
    }
  }
  .avatar {
    width: 72rpx;
    height: 72rpx;
    margin-right: 16rpx;
    border-radius: 50%;
  }
  .icon {
    width: 32rpx;
    height: 28rpx;
  }
  .icon-like {
    background-image: url($img-base + "career/thumb.png");
  }
  .icon-like-on {
    background-image: url($img-base + "career/praise.png");
  }

  .reply-list {
    .avatar {
      width: 46rpx;
      height: 46rpx;
    }
  }
  .load-more {
    .line {
      color: #DADADA;
      margin-right: 20rpx;
    }
  }
}

</style>